<template>
	<view class="zone">
		<Header title="设置"></Header>
		<view class="main">

			<view class="htwo">
				<image class="yun" src="http://image.qxgm.site/tdz/img/public/m_yun.png" mode="widthFix"></image>
				<image class="ping1" src="http://image.qxgm.site/tdz/img/public/ping1.png" mode="widthFix"></image>
				<view class="kbox">
					<view class="header">
						<image :src="userinfo.avatar" mode="widthFix"></image>
					</view>
					<view class="tixian">
						昵称:{{userinfo.username}}
					</view>
				<!-- 	<image class="setting" src="http://image.qxgm.site/tdz/img/my/mg-01.png" mode="widthFix">
					</image> -->
				</view>
			</view>

			<image class="ping1" src="http://image.qxgm.site/tdz/img/public/ping1.png" mode="widthFix"></image>
			<view class="listBox">
				<!-- 		<view class="list">
					<view class="listin">
						<image class="rightimg" src="http://image.qxgm.site/tdz/img/my/mg-07.png" mode="widthFix"></image>
						<span>背景音乐</span>
					</view>
					<u-switch @change="change" size='44' active-color="#865172" inactive-color="#ddd"
						v-model="checked"></u-switch>
				</view> -->
				<view class="list" @click="$p.navto('/pages/login/agreement')">
					<view class="listin">
						<image class="rightimg" src="http://image.qxgm.site/tdz/img/my/mg-08.png" mode="widthFix">
						</image>
						<span>用户协议</span>
					</view>
					<view class="dianji">
						点击查看
					</view>
				</view>
				<view class="list" @click="$p.navto('/pages/login/privacy')">
					<view class="listin">
						<image class="rightimg" src="http://image.qxgm.site/tdz/img/my/mg-09.png" mode="widthFix">
						</image>
						<span>隐私政策</span>
					</view>
					<view class="dianji">
						点击查看
					</view>
				</view>
				<view class="list" @click="logoff=true">
					<view class="listin">
						<image class="rightimg" src="http://image.qxgm.site/tdz/img/my/mg-10.png" mode="widthFix">
						</image>
						<span>注销账号</span>
					</view>
					<view class="dianji">
						点击注销
					</view>
				</view>
				<view class="list" @click="logout=true">
					<view class="listin">
						<image class="rightimg" src="http://image.qxgm.site/tdz/img/my/mg-11.png" mode="widthFix">
						</image>
						<span>退出账号</span>
					</view>
					<view class="dianji">
						点击退出
					</view>
				</view>
			</view>
		</view>

		<!-- 修改昵称 -->
		<u-mask :show="changes">
			<view class="warp">
				<image class="mask1" src="http://image.qxgm.site/tdz/img/public/mask1.png" mode="widthFix"></image>
				<view class="mask_content">
					<view class="m_info">
						<view class="m_title">
							<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix" />
							<text>修改昵称</text>
							<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix" />
						</view>
						<view class="jihuop">
							<p class="tanp2">当前昵称：{{userinfo.username}}</p>

							<input type="text" v-model="changeName" maxlength="12" class="chipt"
								placeholder-class="chaon" placeholder="请输入要修改的昵称" />

							<view class="btn3" @click="chnfirmChange">
								修改昵称
							</view>

						</view>
					</view>
				</view>
				<image class="m_close" @click="changes = false" src="http://image.qxgm.site/tdz/img/public/cha.png"
					mode="widthFix" />
				<image class="mask3" src="http://image.qxgm.site/tdz/img/public/mask3.png" mode="widthFix"></image>
			</view>
		</u-mask>

		<!-- 注销账号 -->
		<u-mask :show="logoff">
			<view class="warp">
				<image class="mask1" src="http://image.qxgm.site/tdz/img/public/mask1.png" mode="widthFix"></image>
				<view class="mask_content">
					<view class="m_info">
						<view class="m_title">
							<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix" />
							<text>注销账号</text>
							<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix" />
						</view>
						<view class="jihuop">
							<p class="tanp1">您确定要注销当前账号吗？<br>
								注销之后不能重新注册！
							</p>
							<view class="btns">
								<view class="btn1" @click="logoff=false">
									取消
								</view>
								<view class="btn2" @click="log_off">
									确认退出
								</view>
							</view>

						</view>
					</view>
				</view>
				<image class="m_close" @click="logoff = false" src="http://image.qxgm.site/tdz/img/public/cha.png"
					mode="widthFix" />
				<image class="mask3" src="http://image.qxgm.site/tdz/img/public/mask3.png" mode="widthFix"></image>
			</view>
		</u-mask>

		<!-- 退出游戏 -->
		<u-mask :show="logout">
			<view class="warp">
				<image class="mask1" src="http://image.qxgm.site/tdz/img/public/mask1.png" mode="widthFix"></image>
				<view class="mask_content">
					<view class="m_info">
						<view class="m_title">
							<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix" />
							<text>退出游戏</text>
							<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix" />
						</view>
						<view class="jihuop">
							<p class="tanp1">您确定要退出当前账号吗？</p>
							<view class="btns">
								<view class="btn1" @click="logout=false">
									取消
								</view>
								<view class="btn2" @click="tuichu">
									确认退出
								</view>
							</view>

						</view>
					</view>
				</view>
				<image class="m_close" @click="logout = false" src="http://image.qxgm.site/tdz/img/public/cha.png"
					mode="widthFix" />
				<image class="mask3" src="http://image.qxgm.site/tdz/img/public/mask3.png" mode="widthFix"></image>
			</view>
		</u-mask>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				changes: false,
				logout: false,
				logoff: false,
				userinfo: '',
				// muteBgMusic: true, //静音
				// checked: uni.getStorageSync('is_music'), //音乐开关
				changeName: '',
			};
		},
		// watch: {
		// 	muteBgMusic(newValue, oldValue) {
		// 		if (newValue) {
		// 			// 开启静音
		// 			this.$music.playBgm({
		// 				mute: true
		// 			});
		// 		} else {
		// 			// 关闭 静音
		// 			this.$music.playBgm({
		// 				mute: false
		// 			});
		// 		}
		// 	},

		// },
		onLoad() {
			this.getUserInfo();
		},
		methods: {
			// 获取个人信息
			async getUserInfo() {
				let res = await this.$http.index.getUserInfo()
				if (res.code == 1) {
					this.userinfo = res.data
				}
			},
			// 音乐开关
			// change(status) {
			// 	uni.setStorageSync('is_music', status)
			// 	if (status) {
			// 		this.$music.playBgm({
			// 			mute: false
			// 		})
			// 	} else {
			// 		this.$music.playBgm({
			// 			mute: true
			// 		});
			// 	}
			// },
			// 注销
			async log_off() {
				let res = await this.$http.index.zhuxiao()
				if (res.code == 1) {
					uni.showToast({
						title: res.msg,
					});
					setTimeout(() => {
						uni.removeStorageSync('token');
						uni.reLaunch({
							url: '/pages/login/login'
						});
					}, 1500)
				} else {
					this.$u.toast(res.msg);
				}
			},
			// 退出登录
			tuichu() {
				uni.removeStorageSync('token');
				uni.clearStorageSync()
				uni.reLaunch({
					url: '/pages/login/login',
					animationType: 'none',
					animationDuration: 10
				});
			},
			// 修改昵称
			async chnfirmChange() {
				if (this.changeName == '' || this.changeName == null) {
					this.$u.toast('请输入昵称')
					return
				}
				let res = await this.$http.index.changeNickname({
					nickname: this.changeName
				})
				this.$u.toast(res.msg)
				if (res.code == 1) {
					this.changes = false
					this.getUserInfo();
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.zone {
		min-height: 100vh;
		background: url(http://image.qxgm.site/tdz/img/public/p_bg.png) no-repeat;
		background-size: 100% 100%;
	}

	.main {
		padding: 19px 0px 0;
	}

	.htwo {
		position: relative;
		margin-bottom: 4px;
	}

	.yun {
		position: absolute;
		top: -30%;
		left: 0;
		width: 44%;
		z-index: 9;
	}

	.ping1 {
		width: 100%;
		display: flex;
	}

	.kbox {
		background: url(http://image.qxgm.site/tdz/img/public/ping2.png);
		background-size: 100% auto;
		padding: 0px 18px 5px 20px;
		border-bottom: 6px solid #b0a3a1;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.header {
		width: 64px;
		height: 64px;
		box-sizing: border-box;
		background: url(http://image.qxgm.site/tdz/img/my/mg-02.png) no-repeat;
		background-size: 100% 100%;
		padding: 4px 4px;

		image {
			width: 100%;
			border-radius: 50%;
		}
	}

	.tixian {
		flex: 1;
		margin-left: 8px;
	}

	.setting {
		width: 36px;
	}

	.listBox {
		background: url(http://image.qxgm.site/tdz/img/public/ping2.png);
		background-size: 100% auto;
		padding: 0 8px;
		height: calc(100vh - 202px);
		overflow-y: scroll;
	}

	.list {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: linear-gradient(0deg, rgba(142, 100, 138, 0.3), rgba(168, 154, 168, 0.3));
		box-shadow: 0px 1px 1px 0px rgba(141, 79, 108, 0.73);
		margin-bottom: 9px;
		height: 62px;
		padding: 0 18px 0 26px;
		box-sizing: border-box;
		border-radius: 20px;
	}

	.rightimg {
		width: 40px;
	}

	.listin {
		display: flex;
		align-items: center;

		span {
			font-size: 18px;
			font-weight: normal;
			color: #333333;
			line-height: 24px;
			margin-left: 20px;
		}
	}

	.dianji {
		font-size: 15px;
		font-weight: normal;
		text-decoration: underline;
		color: #AD27A5;
		line-height: 24px;
	}

	.jihuop {
		padding: 0 10%;

		.tanp1 {
			font-size: 18px;
			font-weight: normal;
			color: #50433A;
			line-height: 30px;
			text-align: center;
			margin-top: 20px;
		}

		.tanp2 {
			font-weight: normal;
			font-size: 18px;
			color: #0290D7;
			line-height: 24px;
			text-align: center;
			margin-top: 2vh;
		}

		.btn3 {
			display: block;
			margin: 3vh auto 0;
			width: 116px;
			height: 37px;
			font-size: 18px;
			font-weight: normal;
			line-height: 37px;
			color: #fefbca;
			text-align: center;
			text-shadow: 0 1px 1px #CB6500;
			background: url(http://image.qxgm.site/tdz/img/public/anniu.png) no-repeat;
			background-size: 100% 100%;
		}

		.chipt {
			background: #bcb8ba;
			border-radius: 1px;
			text-align: center;
			padding: 13px 0;
			margin-top: 18px;
		}

		.chaon {
			font-size: 15px;
			color: #666666;
			line-height: 15px;
			text-align: center;
		}

		.btns {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 6vh;

			.btn1 {
				width: 116px;
				height: 37px;
				font-size: 18px;
				font-weight: normal;
				line-height: 37px;
				color: #fefbca;
				text-align: center;
				text-shadow: 0 1px 1px #CB6500;
				background: url(http://image.qxgm.site/tdz/img/ceo/mg-05.png) no-repeat;
				background-size: 100% 100%;
			}

			.btn2 {
				width: 116px;
				height: 37px;
				font-size: 18px;
				font-weight: normal;
				line-height: 37px;
				color: #fefbca;
				text-align: center;
				text-shadow: 0 1px 1px #CB6500;
				background: url(http://image.qxgm.site/tdz/img/public/anniu.png) no-repeat;
				background-size: 100% 100%;
			}

		}

	}
</style>